dark theme UserCSS@v.0.2.0
takker.iconの編集用テーマ
https://gyazo.com/3481efedc3a726df82d679d1747fcd38.png#.png
変更点
できるだけcustom propertyをいじるようにする
2021-03-21 04:14:59 行リンクが見にくいのを直した 既知の問題
/icons/done.iconテーブル記法がとても見にくい テーブルと本文との境界がとても分かりづらい
枠線を設けることで対処したい
テーブル全然使わないからあんまり対処するmotivationが沸かないんだよなあtakker.icon
custom propertiesの設定
hacker1やdefault-darkをベースにする
すべてのthemeで有効にするために、htmlの子要素であるbodyに設定している
htmlに直接指定しても、themeの変数が優先されてしまう
code:style.css
body {
--dark-theme-border: solid 1px #888; }
関連ページリスト
code:style.css
body {
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, .23);
--card-title-color: rgba(255, 255, 255, .9);
--card-title-bg: rgba(41, 169, 114, 0.7);
--card-description-color: rgba(204, 204, 204, .9);
--card-description-code-color: #99f; --card-box-shadow-color: transparent;
--card-box-shadow: none;
--card-box-hover-shadow: transparent;
--relation-label-links-bg: var(--card-bg) !important;
--relation-label-bg: var(--card-bg) !important;
--relation-label-empty-bg: var(--card-bg) !important;
--relation-label-text: var(--card-title-color) !important;
}
code:style.css
body {
}
Page Menu
code:style.css
body {
--body-headings-color: var(--tool-color);
--line-permalink-color: rgba(234, 218, 74, .35);
}
本文
code:style.css
body {
--body-bg: var(--dark-theme-bg);
--page-bg: var(--dark-theme-bg);
--code-bg: rgba(0,0,0,0.1);
--cursor-code-line-number-color: #FF00F0; }
code:style.css
body {
--dropdown-menu-text-color: var(--page-text-color);
--dropdown-menu-divider-color: var(--dark-theme-bg);
--dropdown-menu-text-hover-color: var(--page-text-color);
}
code:style.css
.dropdown-menu,
.drawer .drawer-menu{
background-color: var(--dropdown-menu-bg, #fff); border: var(--dropdown-menu-border, unset);
}
.dropdown-menu > li > a,
.drawer .drawer-menu ul li a,
.page-menu ul > li > div {
color: var(--dropdown-menu-text-color, #333); }
.dropdown-menu>li>a:active,
.drawer-menu ul li a:active,
color: var(--dropdown-menu-text-hover-color, #262626); background-color: var(--dropdown-menu-text-hover-bg, #f5f5f5); }
.dropdown-menu .divider,
.drawer-menu .divider {
background-color: var(--dropdown-menu-divider-color, #e5e5e5); }
editorに枠線をつける
code:style.css
.page {
box-shadow: none;
border: var(--dark-theme-border);
}
ScrapScriptの吹き出しの色を合わせる
code:style.css
.daiiz-text-bubble{
box-shadow: none !important;
border: var(--dark-theme-border) !important;
background-color: var(--dark-theme-bg) !important;
color: var(--page-text-color) !important;
}
code:style.css
.table-block .cell {
border-bottom: solid 1px #888; }
code:style.css
code.code span,
code.cli span,
.line code.code-body,
.line .formula code,
.page-list-item .description code/* ページカード用 */{
color: var(--code-color);
}
.line code.helpfeel {
background-color: var(--code-bg);
}
.line span.code-block .code-block-start {
}
.line span.code-block .code-block-start>css,
.line span.code-block .code-block-start>span>*{
font-size: inherit;
color: rgba(157, 165, 180, 0.6);
}
.line span.code-block .code-block-start>* {
padding: 3px;
}
.line span.code-block .code-block-start:hover{
color: rgba(157, 165, 180, 1.0);
}
span.hljs-keyword, span.hljs-selector-attr{
color:#c678dd;
}
span.hljs-selector-id{
}
span.hljs-selector-tag{
}
span.hljs-selector-class, span.hljs-selector-pseudo{
}
span.hljs-built_in {
}
span.hljs-class>.hljs-title{
}
span.hljs-function>.hljs-title{
}
span.hljs-string{
}
span.hljs-number{
}
code blockの色調節
code:style.css
.line span.code-block .pad:not(.code-block-margin) {
background-color: rgba(255,255,255,0.05);
}
.code-block .pad:not(.code-block-margin)::before {
}
.line span.code-block .code-block-margin {
background-color: var(--dark-theme-bg);
}
code:style.css
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: rgb(39, 40, 34) !important;
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a {
}
選択範囲の色を青白にする
デフォルトの緑色は、黒背景に合わなかった
白にした
code:style.css
::selection {
color: unset;
background: rgba(0,115,230,0.5);
}
.selection{
}
中黒の色を変える
code:style.css
.line .indent-mark .dot {
background-color: gray;
}
.line.number-list .dot::before {
color: gray;
}
References